HTML的标签可以分为很多种，比如head里面的元信息类标签，又比如img、video、audio之类的替换型媒体标签，又或者如div、span等布局标签。在HTML5以前以及现在，布局大多使用Div进行布局，但是 H5 标准中一个特点就是标签的语义化。关于什么是语义化的标签、使用他有什么好处，在接触之前我也是不了解的，为了快速开发大多使用 div 进行布局，然后通过有业务含义的class来定义样式，不过最近看到了一些文章讲述语义化标签，也做过一些demo进行测试，那就来记录下最近关于标签语义化的成果。
语义类标签是什么，使用它有什么好处？
语义类标签
语义类标签也是写代码中经常会用到的一类标签，它们的特点是视觉表现上互相都差不多，主要的区别在于它们表示了不同的语义，比如会经常见到的section、nav、p，这些都是语义类的标签。语义呢，则是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，因此需要依靠语义标签代为表达。
那为什么要用语义呢？
在写代码的时候，多数都不用复杂的语义标签， 只靠div 和 span 就能满足开发的需求了，这样做既能不必纠结与使用的语义化标签是否正确，又能快速开发便于后期维护。
HTML原称是超文本标记语言，但是在现在的开发过程中HTML用于描述软件的界面多过于富文本，而软件里面的东西，具体要根据业务划分，实际上几乎是没有语义的。毕竟HTML发明之初也不是用作今天我们所能看到的五彩缤纷的网站门户，举例说，做了一个购物车功能，一定要给每个购物车里的商品套上ul吗？又或者说，加入购物车这个按钮，一定要用Button吗？我觉得没必要，因为这个场景里面，跟文本中的列表，以及表单中的Button，其实已经相差很远了，所以，我觉得在任何软件界面的场景中，直接使用div和span也是可以的。
不过，在很多场景里，语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处
- 语义类标签对开发者更为友好，使用语义类标签增强了可读性。即便是在没有CSS的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护（前提是团队全部使用语义化标签，不然只会一团糟）
- 十分适宜机器阅读。它的文字表现力丰富，更适合检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。
不过，不恰当地使用语义标签，反而会造成负面作用。这里举一个常见的误区作为例子。我们都知道ul是无序列表，ol是有序列表，所以不应该给所有并列关系的元素都套上ul。
实际上， ul 是长成下面的这种样子的(以下来自HTML标准)。
I have lived in the following countries:
- Switzerland
- Norway
- United Kingdom
- United States
ul多数出现正在行文中间，它的上文多数在提示：要列举某些项。但是，如果所有并列关系都用ul，会造成大量冗余标签。
错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写加重负担。错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给CSS编写加重负担。
因此，对于语义标签，在看过多位大牛的分析文章后，我觉得：“用对”比“不用”好，“不用”比“用错”好。但是，我觉得有理想的前端工程师还是应该去追求“用对”它们。
